<template>
  <div style="padding: 20px">
    <section id="statistics">
      <div class="top">
        <div class="left">
          <Icon type="ios-bookmark" style="vertical-align: middle" />
          <i>体征检测数据</i>
        </div>
        <div class="time">
          <DatePicker
            format="yyyy/MM/dd"
            placeholder="创建时间"
            type="daterange"
            show-week-numbers
            @on-change="dateChange"
            split-panels
            v-model="bloc.form.date"
            style="width: 200px; margin-right: 5px"
          ></DatePicker>
        </div>
      </div>
      <div class="bottom">
        <Table
          border
          :loading="bloc.loading"
          :columns="columns2"
          highlight-row
          :data="bloc.paged.items"
        >
<!--          <template slot-scope="{ row }" slot="action">-->
<!--            <Button size="small" type="error" @click="removeItem(row)">-->
<!--              删除-->
<!--            </Button>-->
<!--          </template>-->
          <slot name="footer" slot="footer">
            <Page
              show-elevator
              show-total
              show-sizer
              :total="bloc.paged.itemCount"
              :current="bloc.paged.pageIndex"
              :page-size="bloc.paged.pageSize"
              :page-size-opts="[15, 30, 50, 100]"
              @on-change="(val) => bloc.load(val, bloc.paged.pageSize, this.memberId)"
              @on-page-size-change="
                (val) => bloc.load(bloc.paged.pageIndex, val, this.memberId)
              "
            />
          </slot>
        </Table>
      </div>
    </section>
  </div>
</template>
<script lang="ts">
    import { Component, Prop, Vue } from "vue-property-decorator";
    import { MassageBloc } from "@/view/family/component/MassageBloc";
    import { formatDate } from "@/base/util/Dates";
    import { Health } from "@/base/model/Health";

    @Component({
        components: {},
    })
    export default class extends Vue {
        @Prop(Number) memberId!: number;
        columns2 = [
            {
                title: "ID",
                key: "id",
                align: "left",
                minWidth: 160,
                tooltip: true,
            },
            {
                title: "疲劳指数",
                key: "arr",
                align: "left",
                minWidth: 100,
                tooltip: true,
            },
            {
                title: "心率",
                key: "hr",
                align: "left",
                minWidth: 100,
                tooltip: true,
            },
            {
                title: "微循环",
                key: "hrv",
                align: "left",
                minWidth: 100,
                tooltip: true,
            },
            // {
            //   title: "PBF_H体脂率",
            //   key: "pbf",
            //   align: "left",
            //   minWidth: 100,
            //   tooltip: true,
            // },
            // {
            //   title: "PBW体水分率",
            //   key: "pbw",
            //   align: "left",
            //   minWidth: 100,
            //   tooltip: true,
            // },
            {
                title: "血氧",
                key: "qt",
                align: "left",
                minWidth: 100,
                tooltip: true,
            },
            {
                title: "呼吸率",
                key: "rr",
                align: "left",
                minWidth: 100,
                tooltip: true,
            },
            {
                title: "焦虑指数",
                key: "sna",
                align: "left",
                minWidth: 100,
                tooltip: true,
            },
            {
                title: "创建时间",
                align: "left",
                render: (h: any, params: any) => {
                    return h("span", {
                        domProps: {
                            innerText: formatDate(
                                new Date(params.row.created),
                                "yyyy-MM-dd hh:mm:ss"
                            ),
                        },
                    });
                },
                minWidth: 160,
                tooltip: true,
            },
            // {
            //     title: "操作",
            //     slot: "action",
            //     width: 47 * 1 + 61 * 0 + 75 * 0 + 20,
            //     align: "left",
            //     tooltip: true,
            // },
        ];
        bloc: MassageBloc = new MassageBloc();

        dateChange() {
            this.bloc.load(1, 15, this.memberId).catch((e) => {
                this.$Message.error("操作错误");
            });
        }

        // removeItem(dataItem: Health) {
        //     this.$Modal.confirm({
        //         title: "提示",
        //         content: "确认删除后将无法恢复！还要继续吗？",
        //         okText: "删除",
        //         cancelText: "取消",
        //         onOk: () => {
        //             this.bloc
        //                 .removeItem(dataItem)
        //                 .then((value) => {
        //                     this.bloc.load(
        //                         this.bloc.paged.pageIndex,
        //                         this.bloc.paged.pageSize,
        //                         this.memberid
        //                     );
        //                 })
        //                 .then(() => {
        //                     this.$Message.success("删除成功");
        //                 })
        //                 .catch((e) => {
        //                     this.$Message.error("删除失败");
        //                 });
        //         },
        //     });
        // }

        mounted() {
            this.bloc
                .load(
                    this.bloc.paged.pageIndex,
                    this.bloc.paged.pageSize,
                    this.memberId
                )
                .catch((e) => {
                    this.$Message.error("操作错误");
                });
        }
    }
</script>
<style lang="less" scoped>
  #statistics {
    .top {
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      margin-left: 20px;

      i {
        font-size: 20px;
      }

      .time {
        float: right;
        margin-right: 300px;
      }
    }
  }
</style>
